import React, { Fragment } from 'react';
import { Layout, Menu } from 'antd';
import { withRouter,Link } from 'react-router-dom';
import styles from './styles.module.less';
import { connect } from 'react-redux';
import {RightOutlined} from '@ant-design/icons'


const { Sider } = Layout;
const { SubMenu } = Menu;
class FSMSider extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        openKeys:[],
        selectedKeys: [''],
        equip1:{},
        equip2:{},
        equip3:{},
        equip4:{},
      }
    }
    
    subMenuAction = (e) => {
      // console.log(this.props);
      const {getCurve, getAverageRate, setChoice, get2DAnd3D, index } = this.props
      console.log(e);
      //e[0][3]  这个e是selectedKeys
      let equip;
      if(e[2] !== undefined){
        equip = this.props.backImgList[index].backImgVo2s[e[2]];
      } else {
        equip = this.props.backImgList[index].backImgVo2s[e[1]];
      }
      this.setState({
          equip1:{
            equipId: equip.equipId,
            type:1,
            choice:0,
          },
          equip2:{
            equipId: equip.equipId,
            type:2,
            choice:0,
          },
          equip3:{
            equipId: equip.equipId,
            type:3,
            choice:0,
          },
          equip4:{
            equipId: equip.equipId,
            type:4,
            choice:0,
          }
        })
        equip.choice = 0
        const curveEquip = {
          equipId:equip.equipId,
          type:1,
          time:'newTime',
          choice:0
        }
        // console.log(equip.equipId);
        // equip.push({choice:0})
        // console.log(equip);
        setChoice({optionData:{}})
        setChoice({equip: equip})
        getCurve(equip)
        getAverageRate(equip)
        setChoice({choice:'all'})
        setChoice({width:550,height:300})
        get2DAnd3D(this.state.equip1)
        get2DAnd3D(this.state.equip2)
        get2DAnd3D(this.state.equip3)
        get2DAnd3D(this.state.equip4)
    }
    handleClick = (e) => {
      const {setChoice, get2DAnd3D, getCurve, getAverageRate, index} = this.props;
      console.log(e);
      let equip = this.props.backImgList[index].backImgVo2s[e.keyPath[1]];
      setChoice({
        equip:equip
      })
      this.setState({
        selectedKeys:[e.key]
      })
      // console.log(e.key.slice(1));
      setChoice({choice:e.key.slice(1)})
      setChoice({width:980,height:600})
      // const equip = this.props.backImgList[index].backImgVo2s[e[1]]
      const curveEquip = {
          equipId:equip.equipId,
          type:1,
          time:'newTime',
      }
      console.log(e.key.slice(1));
      switch (e.key.slice(1)) {
        case 'lt':
          curveEquip.choice = 1
          getCurve(curveEquip)
          get2DAnd3D(this.state.equip1)
          break;
        case 'rt':
          curveEquip.choice = 2
          getCurve(curveEquip)
          get2DAnd3D(this.state.equip2)
          break;
        case 'sv':
          curveEquip.choice = 3
          getCurve(curveEquip)
          get2DAnd3D(this.state.equip3)
          break;
        case 'avgRate':
          getAverageRate(curveEquip)
          get2DAnd3D(this.state.equip4)
          break;
        default:
          break;
      }
    }
    handleTitleClick = e =>{
      console.log(e);
      const {setChoice} = this.props;
      // console.log(this.state.selectedKeys);
      setChoice({flag:'1'})
      this.setState({
        selectedKeys:['']
      })
    } 
    MenuItems(data){
      const {location,history} = this.props
      if(data == []) {
          console.log(123);
          location.pathname = '/equipment/hotMap'
          history.push(location)
        
      }
      // console.log(location);
      return (
        data.map((item,index)=>{
          return (
            <SubMenu key={index} onClick={this.handleClick} onTitleClick={this.handleTitleClick} title={item.describe} >
              <Menu.Item key={index + "lt"}>壁厚损失</Menu.Item>
              <Menu.Item key={index + "rt"}>剩余壁厚</Menu.Item>
              <Menu.Item key={index + "sv"}>腐蚀速率</Menu.Item>
              <Menu.Item key={index + "avgRate"}>平均腐蚀速率</Menu.Item>
              {/* <Link to={location.pathname +'/'+ item.equipId}></Link> */}
            </SubMenu>
          )
        })
      )
    }
    componentDidMount() {
      const {history, location ,setChoice, get2DAnd3D, getCurve, getAverageRate, index, equipIndex} = this.props;
      if(!equipIndex && this.props.backImgList.length !== 0) {
        // setChoice({equip:this.props.backImgList[index].backImgVo2s[0]})
        const equip = this.props.backImgList[index].backImgVo2s[0];
        this.setState({
          equip1:{
            equipId: equip.equipId,
            type:1,
            choice:0,
          },
          equip2:{
            equipId: equip.equipId,
            type:2,
            choice:0,
          },
          equip3:{
            equipId: equip.equipId,
            type:3,
            choice:0,
          },
          equip4:{
            equipId: equip.equipId,
            type:4,
            choice:0,
          }
        })
        equip.choice = 0
        const curveEquip = {
          equipId:equip.equipId,
          type:1,
          time:'newTime',
          choice:0
        }
        setChoice({optionData:{}})
        setChoice({equip:equip})
        getCurve(equip)
        getAverageRate(equip)
        // setChoice({choice:'all'})
        setChoice({width:550,height:300})
        get2DAnd3D(this.state.equip1)
        get2DAnd3D(this.state.equip2)
        get2DAnd3D(this.state.equip3)
        get2DAnd3D(this.state.equip4)
      } else {
        location.pathname = '/equipment'
        history.push(location)
      }
    }
    // menuChange = (e) => {
    //     const { history, location } = this.props;
    //     location.pathname = e.key;
    //     history.push(location);
    // }

    render() {
      const {index, equipIndex, setChoice} = this.props;
      const maxSub = 'sub' + index
      const secIndex = equipIndex ? equipIndex.toString() : '0'
      // console.log(this.props.backImgList[index].backImgVO1.name);
      return (
              <Sider width="200" theme="light">
                  <div className={ styles.logoContent }>
                    {/* 四川大学 */}
                    <div className={styles.logo}></div>
                    {/* <a >
                      <img className={ styles.logo } src={logo} />
                    </a> */}
                </div>
                  <Menu
                      onClick={ this.menuChange }
                      mode="inline"
                      // theme="dark"
                      defaultOpenKeys={[maxSub, secIndex]}
                      selectedKeys={this.state.selectedKeys}
                      onOpenChange={this.subMenuAction}
                      // defaultSelectedKeys={['0']}
                  >
                      <SubMenu key={maxSub} title={this.props.backImgList[index]?this.props.backImgList[index].backImgVO1.name:''} >
                        {this.MenuItems(this.props.backImgList[index]?this.props.backImgList[index].backImgVo2s:[])}
                      </SubMenu>
                  </Menu>
              </Sider>
            )
      // switch (location.pathname) {
      //   case '/FSM/653xfjvb':
      //     return (
      //       <Sider width="200">
      //           <div className={ styles.logo }>
      //               斯克瑞德
      //           </div>
      //           <Menu
      //               onClick={ this.menuChange }
      //               mode="inline"
      //               theme="dark"
      //               defaultOpenKeys={['sub0','sub0-0']}
      //               selectedKeys={this.state.selectedKeys}
      //               triggerSubMenuAction='click'
      //               onOpenChange={this.subMenuAction}
      //               // defaultSelectedKeys={['0']}
      //           >
      //               <SubMenu key='sub0'  title="普光#2线" >
      //                 {this.MenuItems(this.props.backImgList[0].backImgVo2s)}
      //               </SubMenu>
      //           </Menu>
      //       </Sider>
      //   )
      //   case '/FSM/6j88573b':
      //     return (
      //       <Sider width="200">
      //           <div className={ styles.logo }>
      //               斯克瑞德
      //           </div>
      //           <Menu
      //               onClick={ this.menuChange }
      //               mode="inline"
      //               theme="dark"
      //               defaultOpenKeys={['sub1','sub1-1']}
      //               selectedKeys={this.state.selectedKeys}
      //               onOpenChange={this.subMenuAction}
      //               // defaultSelectedKeys={['0']}
      //           >
      //               <SubMenu key='sub1' title="D403+M503" >
      //                 {this.MenuItems(this.props.backImgList[1].backImgVo2s)}
      //               </SubMenu>
      //           </Menu>
      //       </Sider>
      //     )
      //   case '/FSM/dfxg055c':
      //     return (
      //       <Sider width="200">
      //           <div className={ styles.logo }>
      //               斯克瑞德
      //           </div>
      //           <Menu
      //               onClick={ this.menuChange }
      //               mode="inline"
      //               theme="dark"
      //               defaultOpenKeys={['sub2','sub2-2']}
      //               selectedKeys={this.state.selectedKeys}
      //               onOpenChange={this.subMenuAction}
      //               // defaultSelectedKeys={['0']}
      //           >
      //               <SubMenu key='sub2' title="普光#1线" >
      //                 {this.MenuItems(this.props.backImgList[2].backImgVo2s)}
      //               </SubMenu>
      //           </Menu>
      //       </Sider>
      //     )
      //   case '/FSM/us9qs8uv':
      //     return (
      //         <Sider width="200">
      //             <div className={ styles.logo }>
      //                 斯克瑞德
      //             </div>
      //             <Menu
      //                 onClick={ this.menuChange }
      //                 mode="inline"
      //                 theme="dark"
      //                 defaultOpenKeys={['sub3','sub3-3']}
      //                 selectedKeys={this.state.selectedKeys}
      //                 onOpenChange={this.subMenuAction}
      //                 // defaultSelectedKeys={['0']}
      //             >
      //                 <SubMenu key='sub3' title="304~305站间管道" >
      //                   {this.MenuItems(this.props.backImgList[3].backImgVo2s)}
      //                 </SubMenu>
      //             </Menu>
      //         </Sider>
      //       )
      //   case '/FSM/pzzcpghe':
      //     return (
      //         <Sider width="200">
      //             <div className={ styles.logo }>
      //                 斯克瑞德
      //             </div>
      //             <Menu
      //                 onClick={ this.menuChange }
      //                 mode="inline"
      //                 theme="dark"
      //                 // defaultOpenKeys={['sub0','sub0-0']}
      //                 selectedKeys={this.state.selectedKeys}
      //                 onOpenChange={this.subMenuAction}
      //                 // defaultSelectedKeys={['0']}
      //             >
      //                 <SubMenu key='sub3' title="元坝TIMS-FSM" >
      //                   {this.MenuItems(this.props.backImgList[0].backImgVo2s)}
      //                 </SubMenu>
      //             </Menu>
      //         </Sider>
      //       )
      //   default:
      //   return null;
      //     break;
      // }
        
    }
}
            
const mapStateToProps = (state) => ({ backImgList:state.equipmentPage.backImgList,choice:state.equipmentPage.choice,equip:state.equipmentPage.equip, index:state.equipmentPage.index, equipIndex:state.equipmentPage.equipIndex});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    getCurve: dispatch.equipmentPage.getCurve,
    getAverageRate: dispatch.equipmentPage.getAverageRate,
    setChoice: dispatch.equipmentPage.setState,
    get2DAnd3D: dispatch.equipmentPage.get2DAnd3D,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(FSMSider));
